<template>
	<div class="circle">
		<div class="circle-content">
			<h2>星星之火可以燎原，豪爵第六季自由之旅北线段完美收官</h2>
			<div class="user-and-time">
				<div class="left">
					<el-avatar src="https://www.qjmotor.com/uploadfile/202012/097a77ab9073cf4.jpg"></el-avatar>
					<span class="user">admin</span>
					<span>发表于</span>
					<span class="time">2021-9-28</span>
				</div>
				<div class="right">
					<i class="el-icon-user"></i>
					<span>阅读全文</span>
				</div>
			</div>
			<div class="content-img">
				<img src="../../../../assets/img/qitan1.png" >
			</div>
			<p>纵览五岳三山，历时约一个月，总里程约6千公里，豪爵第六季自由之旅北线段于6月19日在成都完美收官</p>
		</div>
		<advertising></advertising>
	</div>
</template>

<script>
	import advertising from './advertising.vue'
	
	export default {
		components: {
			advertising
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		},
	}
</script>

<style lang="scss" scoped>
	.circle {
		display: flex;
		justify-content: space-between;
		.circle-content {
			width: 60%;
			padding: 2%;
			box-sizing: border-box;
			h2 {
				font-weight: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				&:hover {
					cursor: pointer;
					color: #e60012;
				}
			}
			.user-and-time {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				color: #999;
				font-size: 14px;
				.left {
					display: flex;
					align-items: center;
					.el-avatar {
						width: 20px;
						height: 20px;
						border-radius: 50%;
					}
				}
				.right {
					span {
						&:hover {
							cursor: pointer;
						}
					}
				}
			}
			.content-img {
				width: 100%;
				height: 36vh;
				margin-top: 10px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			p {
				margin-top: 10px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				&:hover {
					cursor: pointer;
					color: #e60012;
				}
			}
		}
		.advertising {
			width: 30%;
		}
	}
</style>
